<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择项卡切换代码</title>
    <script src="js/vue.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
 
    #card_list {
        position: relative;
        background-color: black;
		height: 200px;  /*为防止塌陷，父div必须设置固定高度*/
		
    }
 
 
    .card_list_1 {
        height: 200px;
        width: 100%;
        background-color: rgb(255, 211, 211);
        text-align: center;
        line-height: 200px;
        position: absolute;
        top: 0;
        left: 0;
    }
 
    .card_list_2 {
        height: 200px;
        width: 100%;
        background-color: rgb(152, 179, 253);
        text-align: center;
        line-height: 200px;
        position: absolute;
        top: 0;
        left: 0;
    }
 
    .card_list_3 {
        height: 200px;
        width: 100%;
        background-color: rgb(157, 242, 171);
        text-align: center;
        line-height: 200px;
        position: absolute;
        top: 0;
        left: 0;
    }
 
</style>
 
<body>
 
    <div id="app">
 
        <div class="card_button">
            <button @click="card_click(0)" :style="{color:m_color[0]}">卡片1</button>
            <button @click="card_click(1)" :style="{color:m_color[1]}">卡片2</button>
            <button @click="card_click(2)" :style="{color:m_color[2]}">卡片3</button>
        </div>
 
        <div id="card_list">
                <div v-show="card_list[0]==1" class="card_list_1">
                    卡片1
                </div>
 
                <div v-show="card_list[1]==1" class="card_list_2">
                    卡片2
                </div>
                <div v-show="card_list[2]==1" class="card_list_3">
                    卡片3
                </div>
        </div>
		<div>1</div>
		<div>2</div>
 
    </div>
 
 
</body>
 
<!-- 选中效果 -->
<script>
 
    var app = new Vue({
 
        el: "#app",
        data: {
            m_color: ["red", "black", "blacks"],
            card_list: ["1", "1", "1"],
 
        },
        methods: {
 
            card_click(a) {
 
                // 点击效果
 
                Vue.set(this.m_color, 0, "black");
                Vue.set(this.m_color, 1, "black");
                Vue.set(this.m_color, 2, "black");
 
                Vue.set(this.m_color, a, "red");
 
                // 卡片切换
                Vue.set(this.card_list, 0, "0");
                Vue.set(this.card_list, 1, "0");
                Vue.set(this.card_list, 2, "0");
                Vue.set(this.card_list, a, "1");
 
            }
 
        },
    })
</script>